{{#section 'style'}}<link rel="stylesheet" href="/style/login.css">{{/section}}

<div class="login">
    {{>top_login}}

    <div class="mid wrap">
        <div class="fl ad">
            <a href=""><img src="img/example/login_ad.jpg" alt=""/></a>
        </div>

        <form class="fr form bgWhite" method="post" id="loginForm">
            <div class="title">
                <a href="/register" class="fr">免费注册</a>
                <h2>网站登录</h2>
            </div>

            <div class="account iptWrap"><input type="text" name="name" autocomplete="off" placeholder="邮箱/手机号码" value="{{loginCache.name}}"/></div>
            <div class="pass iptWrap"><input type="password" name="password" placeholder="密码"/></div>
            <div class="codeBox">
                <div class="code iptWrap fl">
                    <input type="text" placeholder="验证码"/>
                    <input type="hidden" class="hidden" value="{{captcha.code}}">
                </div>
                <div class="codeImg">
                    <img src="{{captcha.imgData}}" alt=""/>
                </div>
                <span class="change">换张图</span>
            </div>
            <div class="error">{{#if flash.error}}<div>{{flash.error}}</div>{{/if}}</div>

            <div class="help">
                <a href="" class="fr">忘记密码？</a>
                <label><input type="checkbox" name="rememberme" checked/><span>一周内记住我</span></label>
            </div>

            <div class="btn"><input type="submit" value="登&emsp;录"/></div>
        </form>
    </div>

    {{>footer_login}}

</div>

{{#section 'script'}}
<script>
    $(function(){
        //切换验证码
        var $form=$('#loginForm'),$codeBox=$('.codeBox',$form),$error=$('.error',$form);
        $codeBox.on('click','.change', function () {
            $.get('/captcha').success(function(captcha){
                $codeBox.find('.hidden').val(captcha.code);
                $codeBox.find('img').attr('src',captcha.imgData);
            });
        });

        //提交+验证
        $form.on('submit',function (e) {
            var name=$('.account>input',$form).val(),password=$('.pass>input',$form).val(),captchaIpt=$('.code>input',$form).val(),captchaOut=$('.codeBox .hidden',$form).val(),errs=[];
            if(!(/^13\d{9}$/.test(name) || /^\w+@\w+\.\w+$/.test(name))){
                errs.push('用户名格式错误');
            }
            if(0==password.length){
                errs.push('密码未输入');
            }
            if(captchaIpt!==captchaOut){
                errs.push('验证码输入错误');
            }

            if(errs.length){
                $error.html('<div>'+errs.join('，')+'！</div>');
                errs.length=0;
                $('.change',$codeBox).trigger('click');
                e.preventDefault();
            }
        });

    });
</script>
{{/section}}